<%--
  Created by IntelliJ IDEA.
  User: Liubuzhu
  Date: 2023/12/2
  Time: ฅ(΅•ㅅ•΅❀)ฅ 11:16
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    body{
      background-image: url("./img/login/bg.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100vh;
    }

    .custom-links {
      text-decoration: none;
      color: gray;
    }

    .vertical-line {
      height: 20px;
      width: 2px;
      background-color: #ccc;
    }
  </style>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <script src="./js/bootstrap.bundle.min.js"></script>
  <script src="./js/jquery.min.js"></script>
</head>

<body>

<div class="container col-xl-10 col-xxl-8 px-4 py-2">
  <div class="row align-items-center g-lg-5 " style="padding-top: 30px;">
    <div class="col-md-12 mx-auto col-lg-8">
      <form class="p-4 p-md-5 border rounded-3 bg-light">
        <h2 class="mb-4">注册</h2>
        <div class="row mb-3">
          <div class="col-md-6">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="username" placeholder="账号">
              <label for="username">账号</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="name" placeholder="名称">
              <label for="name">名称</label>
            </div>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col-md-6">
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="email" placeholder="name@example.com">
              <label for="email">邮箱</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-floating mb-3">
              <input type="tel" class="form-control" id="contact" placeholder="联系方式">
              <label for="contact">联系方式</label>
            </div>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col-md-6">
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="password" placeholder="Password">
              <label for="password">密码</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password">
              <label for="confirmPassword">确认密码</label>
            </div>
          </div>
        </div>
        <div class="form-floating mb-3">
          <select class="form-select" id="identity" aria-label="选择身份">
            <option value="" disabled selected>选择身份</option>
            <option value="developer">开发商</option>
            <option value="player">玩家</option>
            <option value="admin">管理员</option>
          </select>
          <label for="identity">身份选择</label>
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit" onclick="register(event)">注册</button>
        <hr class="my-4">
        <div class="d-flex justify-content-end align-items-center">
          <a href="./index.jsp" class="custom-links me-2">已有账号？立即登录</a>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

<script>
  function register(event) {
    event.preventDefault();
    let username = $("#username").val();
    let password = $("#password").val();
    let email = $("#email").val();
    let name = $("#name").val();
    let contact = $("#contact").val();
    let confirmPassword = $("#confirmPassword").val();
    let identity = $("#identity").val();

    if (password !== confirmPassword) {
      alert("密码和确认密码不匹配");
      return;
    }

    $.ajax({
      type: "POST",
      url: "http://localhost:8080/funplay_war/register",
      data: { username: username, password: password, identity: identity, name: name, email: email, contact: contact },
      dataType: "json",
      success: function(response) {
        if (response.success) {
          // 注册成功
          alert("注册成功！");
          // 跳转
          window.location.href = "index.jsp";
        } else {
          // 注册失败
          alert("注册失败: " + response.error);
        }
      },
      error: function(xhr, status, error) {
        // 处理Ajax请求失败
        console.error("Ajax request failed: " + status + ", " + error);
      }
    });
  }
</script>

</body>
</html>

